import React, { useEffect, useState } from 'react';
import { Form, Col, Space, Input, Select, Button, Radio, DatePicker, Table } from 'antd';
import { WidthProvider, Responsive } from "react-grid-layout";
import _ from "lodash";
import Warningpending from '@/pages/page/components/Warningpending';
import styles from '@/pages/page/index.module.scss';
const ResponsiveReactGridLayout = WidthProvider(Responsive);

const AddCardsCom = ({ children }) => {
  const defaultProsps = {
    cols: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
    rowHeight: 100,
  }
  const [widgets, setWidgets] = useState<any>([]);
  const [newlayouts, setNewLayouts] = useState({});

  //只在初始化的时候存值（数据结构）
  const getFromLS = (key) => {
    let ls = {};
    if (global.localStorage) {
      try {
        ls = JSON.parse(global.localStorage.getItem("rgl-9")||'') || {};
      } catch (e) {
        /*Ignore*/
      }
    }
    return ls[key];
  }

  // const getData = () => {
  //   const addItem = {
  //     x: 0,
  //     y: Infinity, // puts it at the bottom
  //     w: 1,
  //     h: 2,
  //     i: new Date().getTime().toString(),
  //   };
  //   data1.map((item, index) => {
  //     item.x = index == 0 ? addItem.x : addItem.x + (index * 3);
  //     item.y = addItem.y;
  //     item.w = addItem.w;
  //     item.h = addItem.h;
  //     item.i = addItem.i + item.title;
  //   })

  //   return data1;
  // }

  useEffect(() => {
    //初始化
    // setWidgets(getData());
    // getFromLS("layouts");
  }, [])

  // const saveToLS = (key, value) => {
  //     if (global.localStorage) {
  //         global.localStorage.setItem(
  //             "rgl-9",
  //             JSON.stringify({
  //                 [key]: value
  //             })
  //         );
  //     }
  // }

  const generateDOM = () => {
    console.log(widgets, 'widgets');

    //根据不同的类型生成不同的组件
    return _.map(widgets, (l, i) => {
      // if (l.type == 'warrning') {
      return <div
        className={styles.warningpendCard}
        key={l.i}
        data-grid={l}
      ><Warningpending l={l}></Warningpending></div>
      // }
    });
  }

  const addCards = (type) => {
    const addItem = {
      x: (widgets.length * 1) % (12),
      y: Infinity, // puts it at the bottom
      w: 1,
      h: 2,
      i: new Date().getTime().toString(),
      type
      // title: '异动超过阙值111',
      // newYj: '2',
      // pedding: '12',
      // icon: '666',
    }
    setWidgets([...widgets, addItem]);

    // setWidgets((pre) => {
    //     console.log(pre, 'ppppppppppppppp');
    //     return pre = widgets.concat({ ...addItem, type })
    // })
    // setWidgets(prevTodos => prevTodos.concat({ ...addItem, type }))

  }
  const onLayoutChange = (layout, layouts) => {
    console.log(111, '111');

    // saveToLS("layouts", layouts);
    // setNewLayouts(layouts);
    const o = Object.keys(layouts).reduce((a, b) => {
      a[b] = layouts[b];
      return a;
    }, {});
    Object.keys(o).map((key) => {
      setWidgets(o[key]);
    })
  }

  return <div className={styles.warningpend}>
    <Button onClick={() => addCards('warrning')}>添加卡片</Button>
    <ResponsiveReactGridLayout
      className="layout"
      // layouts={newlayouts}
      {...defaultProsps}
      onLayoutChange={(layout, layouts) =>
        onLayoutChange(layout, layouts)
      }
    >
      {generateDOM()}
    </ResponsiveReactGridLayout>
  </div>

}
export default AddCardsCom;
